<template>
  <div id="app">
    <hls-player ref="hlsPlayer" :videoType="videoType"></hls-player>
  </div>
</template>

<script>
import HlsPlayer from '@/components/HlsPlayer.vue'

export default {
  name: 'HomeView',
  components: {
    HlsPlayer
  },
  data() {
    return {
      videoType: 'live'
    }
  },
  mounted() {
    // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
    // http://localhost:8081/video/?url=https://platform-wh.youdingte.com/live/cameraid/1000029%2480/substream/1.m3u8?token=57:Z7frJfZlz6vWGZssbNCwSzntUgrVkWVL
    this.getUrlParams(window.location.href)
  },
  methods: {
    getUrlParams(url) {
      if (url.indexOf("totallength") != -1) {
        this.videoType = 'record'
      } else {
        this.videoType = 'live'
      }
      const urlParams = new URLSearchParams(url.split('?')[1]);
      const params = {};
      for (let param of urlParams.entries()) {
        params[param[0]] = param[1];
      }
      if (params.url) {
        let videoUrl = decodeURIComponent(params.url)
        this.$refs.hlsPlayer.playHls(videoUrl)
      }
      // this.$refs.hlsPlayer.playHls('https://platform-wh.youdingte.com/live/cameraid/1000029%2480/substream/1.m3u8?token=57:Z7frJfZlz6vWGZssbNCwSzntUgrVkWVL') // 实时
      // this.$refs.hlsPlayer.playHls('https://platform-wh.youdingte.com/vod/device/cameraid/1001071%24120/substream/1/recordtype/1/totallength/3609/begintime/1760170912/endtime/1760178117.m3u8?token=57:Z7frJfZlz6vWGZssbNCwSzntUgrVkWVL') // 录像
    }
  },
}
</script>
